
<style type="text/css">
p.welcome {
  line-height: 1.3em;
  background-color: #fdfdf5;
  border-right: 1px dashed silver;
  border-bottom: 1px dashed silver;
}
ul.welcome {
  margin: 10px 0 5px 15px;
  list-style-type: none;
}
ul.welcome li {
  margin-bottom: 3px;
}
.strong {
  font-weight: bold;
  color: blue;
}
</style>

<div style="background-color: #fff0ff; padding: 5px; border: 1px dashed pink; margin-bottom: 10px;">
  <h3>便利なブックマークレットの使い方について</h3>
</div>

<div style="border: 1px dashed pink; padding: 5px; margin-bottom: 10px;">
  <h3 style="color: blue; background-color: #f0f0ff; padding: 3px; border-left: 10px solid skyblue; border-bottom: 1px dashed skyblue;">ブックマークレットとは？</h3>
  <div style="margin-left: 15px; margin-top: 5px;">
    <p class="welcome">ブックマークレットとは、ブラウザのブックマーク（お気に入り）の機能を応用して、ブラウザ上での色々な操作を手助けしてくれるツールのようなものです。<br/><br/>
通常のブックマークは、サイトのURLを登録しますが、ブックマークレットの場合は、JavaScriptで作られたプログラムコードを登録します。<br/>
任意のページを閲覧しているときに、そのブックマークをクリックすることで、ブックマークレットが起動し、登録したブックマークレットに応じた様々な動作をしてくれます。<br/><br/>
ここでは、ブックマーク機能を使う際に便利なブックマークレットを紹介しています。<br/>
一度登録してしまえば、非常に便利に使うことができますので、ぜひご利用ください。<br/>
（登録自体は１度きり、１分も必要ありません。）</p>
  </div>
</div>

<div style="border: 1px dashed pink; padding: 5px; margin-bottom: 10px;">
  <h3 style="color: blue; background-color: #f0f0ff; padding: 3px; border-left: 10px solid skyblue; border-bottom: 1px dashed skyblue;">Internet Explorer 6での登録方法</h3>
  <div style="margin-left: 15px; margin-top: 5px;">
    <div style="margin-top: 5px; margin-left: 20px;">
    <span style="font-size: 15px; font-weight: bold; border: 1px solid silver; padding: 2px; background-color: #f5f5ff">
      <a href="javascript:void(function(){(function(){var _addr='http://<%= request.host_with_port + request.relative_url_root -%>';location.replace('about:blank');document.write('<html><body><form action=&quot;'+_addr+'/bookmark/new&quot; method=&quot;post&quot;><input type=hidden name=&quot;url&quot; value=&quot;'+location.href+'&quot;><input type=hidden name=&quot;title&quot; value=&quot;'+document.title+'&quot;>'+document.title+'<br/><input type=submit value=&quot;Bookmark This&quot;></div></form><script>document.forms[0].submit();</script></body></html>');document.close();})();})()"><%= CUSTOM_RITERAL[:abbr_app_title] -%>でブクマ</a>
    </span>
    </div>

    <ul class="welcome">
      <li>１．上記のリンク<b>「<%= CUSTOM_RITERAL[:abbr_app_title] -%>でブクマ」</b>を右クリックし、メニューの「<b>お気に入りに追加</b>」を選択します。</li>
      <li>２．セキュリティの警告「追加しようとしているお気に入りは、安全でない可能性があります。続行しますか？」とダイアログが出る場合は「<b>はい</b>」を選択。(この操作は安全です。) </li>
      <li>３．お気に入りに追加画面で、「<b>フォルダ</b>」ボタンをクリックして保存するフォルダ「<b>リンク</b>」を選択して「<b>OK</b>」をクリックします。</li>
      <li>４．完了するとツールバーに「<%= CUSTOM_RITERAL[:abbr_app_title] -%>でブクマ」ボタンが作成されます。</li>
    </ul>
    <p style="background-color: #f0f0ff; text-align: right; margin-left: 30px;">...ツールバーが表示されていない場合はブラウザのメニュー「表示」->「ツールバー」->「リンク」から表示するよう設定してください。</p>
  </div>
</div>

<div style="border: 1px dashed pink; padding: 5px; margin-bottom: 10px;">
  <h3 style="color: blue; background-color: #f0f0ff; padding: 3px; border-left: 10px solid skyblue; border-bottom: 1px dashed skyblue;">Firefox での登録方法</h3>
  <div style="margin-left: 15px; margin-top: 5px;">
    <div style="margin-top: 5px; margin-left: 20px;">
    <span style="font-size: 15px; font-weight: bold; border: 1px solid silver; padding: 2px; background-color: #f5f5ff">
      <a href="javascript:void(function(){(function(){var _addr='http://<%= request.host_with_port + request.relative_url_root -%>';location.replace('about:blank');document.write('<html><body><form action=&quot;'+_addr+'/bookmark/new&quot; method=&quot;post&quot;><input type=hidden name=&quot;url&quot; value=&quot;'+location.href+'&quot;><input type=hidden name=&quot;title&quot; value=&quot;'+document.title+'&quot;><div style=\'display: none;\'>'+document.title+'<br/><input type=submit value=&quot;Bookmark This&quot;></div></form><script>document.forms[0].submit();</script></body></html>');document.close();})();})()"><%= CUSTOM_RITERAL[:abbr_app_title] -%>でブクマ</a>
    </span>
    </div>

    <ul class="welcome">
      <li>１．上記のリンク<b>「<%= CUSTOM_RITERAL[:abbr_app_title] -%>でブクマ」</b>をクリックしたままブラウザのツールバーにドラッグ＆ドロップします。</li>
      <li>２．完了するとツールバーに「<%= CUSTOM_RITERAL[:abbr_app_title] -%>でブクマ」ボタンが作成されます。</li>
    </ul>
    <p style="background-color: #f0f0ff; text-align: right; margin-left: 30px;">...ツールバーが表示されていない場合はブラウザのメニュー「表示」->「ツールバー」->「ブックマークツールバー」から表示するよう設定してください。</p>
  </div>
</div>

<div style="border: 1px dashed pink; padding: 5px; margin-bottom: 10px;">
  <h3 style="color: blue; background-color: #f0f0ff; padding: 3px; border-left: 10px solid skyblue; border-bottom: 1px dashed skyblue;">ブックマークレット「<%= CUSTOM_RITERAL[:abbr_app_title] -%>でブクマ」の使いかた</h3>
  <div style="margin-left: 15px; margin-top: 5px;">
    <ul class="welcome">
      <li>１．好きなページに移動したあと、ツールバーにある「<%= CUSTOM_RITERAL[:abbr_app_title] -%>でブクマ」をクリックします。</li>
      <li>２．<%= CUSTOM_RITERAL[:abbr_app_title] -%>のブックマーク登録画面に遷移します。</li>
      <li>３．必要な事項を入力し、「OK」をクリックします。</li>
      <li>４．ブックマークが作成されたメッセージが出たら「OK」をクリックすれば、元のページに戻ります。</li>
    </ul>
    <p class="welcome">これで、<%= CUSTOM_RITERAL[:abbr_app_title] -%>上のあなたのブックマークに登録されています。<br/>
    <%= CUSTOM_RITERAL[:abbr_app_title] -%>で右メニューにある「マイブクマ」をクリックすると、登録されたブックマークが見つかります。</p>
  </div>
</div>
